import React from 'react';
import styled, { keyframes } from'styled-components';
import style from '../../assets/global-style';

const loading = keyframes`
 	0% {
    transform:rotate(45deg) scale(0.8,0.8);
    opacity:1;
  }
  25% {
    transform:rotate(45deg) scale(1,1);
    opacity:0.8;
  }
  100% {
    transform:rotate(45deg) scale(0.8,0.8);
    opacity:1;
  }
`
const LoadingWrapper = styled.div`
	animation:${loading} 1s infinite;
	-webkit-animation:${loading} 1s infinite;
	/* Safari 和 Chrome */
  position: fixed;
  z-index: 1000;
  left: 0; 
  right: 0;  
  top: 0;
  bottom: 0;
  margin: auto;
  width:60px;
	height:60px;
	background:#f00;
	filter:drop-shadow(0px 0px 20px rgb(255,20,20));
	transform:rotate(45deg);

&:before,&:after {
	content:"";
	position:absolute;
	width:60px;
	height:60px;
	background:#f00;
	border-radius:30px;
}
&:before {
	left:-30px;
}
&:after {
	left:0;
	top:-30px;
}
`
function Loading ()  {
  return (
    <LoadingWrapper>
    </LoadingWrapper>
  );
}
export default React.memo (Loading);